<script setup>
import { ref } from "vue";
import myChart from "@/components/myChart";
import { getRandomArrayElements } from "@/utils/tools.js";
const colorList = [
  [
    {
      offset: 0,
      color: "#f84147"
    },
    {
      offset: 1,
      color: "#fb8860"
    }
  ],
  [
    {
      offset: 0,
      color: "#fe7d39"
    },
    {
      offset: 1,
      color: "#faa560"
    }
  ],
  [
    {
      offset: 0,
      color: "#f5b945"
    },
    {
      offset: 1,
      color: "#fdea94"
    }
  ],
  [
    {
      offset: 0,
      color: "#116bd3"
    },
    {
      offset: 1,
      color: "#00fdff"
    }
  ]
];
let result = [
  { name: "重型一分厂", value: 20 },
  { name: "叶片分厂", value: 20 },
  { name: "金工分厂", value: 30 },
  { name: "焊接分厂", value: 52 },
  { name: "工业透平", value: 30 },
  { name: "重型二分厂", value: 28 },
  { name: "隔板分厂", value: 24 },
  { name: "重型一分厂1", value: 40 },
  { name: "叶片分厂1", value: 50 },
  { name: "金工分厂1", value: 60 },
  { name: "焊接分厂1", value: 72 },
  { name: "工业透平1", value: 40 },
  { name: "重型二分厂1", value: 38 },
  { name: "隔板分厂1", value: 34 }
];
const options = ref({
  grid: {
    top: 30,
    left:'-80',
    right: 30,
    bottom: 10,
    containLabel: true
  },
  xAxis: [
    {
      splitLine: {
        show: false
      },
      type: "value",
      show: false
    }
  ],
  yAxis: [
    //值
    {
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      type: "category",
      axisTick: {
        show: false
      },
      inverse: true,
      data: [],

      axisLabel: {
        color: "#fff",
        fontSize: 14,
        // margin: 5,
        align: "left",
        margin: 100,
        formatter: (name, index) => {
          var id = index + 1;
          if (id < 4) {
            return `{icon${id}|${id}} ${name}`;
          } else {
            return `{count|${id}} ${name}`;
          }
        },
        rich: {
          icon1: {
            width: 20,
            height: 20,
            align: "center",
            //把图片放在某个地方直接放链接
            backgroundColor: {
              image:
                "https://a-tuchuang.oss-cn-hangzhou.aliyuncs.com/images/barLabelBg1.png"
            },
            fontSize: 12
          },
          icon2: {
            width: 20,
            height: 20,
            align: "center",
            //把图片放在某个地方直接放链接
            backgroundColor: {
              image:
                "https://a-tuchuang.oss-cn-hangzhou.aliyuncs.com/images/barLabelBg2.png"
            },
            color: "#ffffff",
            fontSize: 12
          },
          icon3: {
            width: 20,
            height: 20,
            align: "center",
            //把图片放在某个地方直接放链接
            backgroundColor: {
              image:
                "https://a-tuchuang.oss-cn-hangzhou.aliyuncs.com/images/barLabelBg3.png"
            },
            color: "#ffffff",
            fontSize: 12
          },
          count: {
            width: 20,
            height: 20,
            align: "center",
            //把图片放在某个地方直接放链接
            backgroundColor: {
              image:
                "https://a-tuchuang.oss-cn-hangzhou.aliyuncs.com/images/barLabelBg4.png"
            },
            color: "#ffffff",
            fontSize: 12
          }
        }
      },
      max: 6 //最多显示7个
    },
    //百分比
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: 12
        },
        formatter: function(value) {
          return `${value}%`;
        }
      },
      data: []
    }
  ],
  series: [
    {
      name: "",
      type: "bar",
      barWidth: 10, // 柱子宽度
      barGap: "10%",
      barGap: "-100%",
      MaxSize: 1,
      showBackground: true,
      barBorderRadius: [30, 0, 0, 30],
      backgroundStyle: {
        color: "#1e375b"
      },
      label: {
        show: false,
        offset: [10, -15],
        color: "#fff",
        fontWeight: 500,
        position: "left",
        align: "left",
        formatter: function(params) {
          return params.data.name;
        }
      },
      itemStyle: {
        normal: {
          color: function(colors) {
            if (colors.dataIndex > 2) {
              return {
                colorStops: colorList[3]
              };
            } else {
              return {
                colorStops: colorList[colors.dataIndex]
              };
            }
          }
        }
      },
      data: []
    }
    // {
    // 	name: "外圆",
    // 	type: "scatter",
    // 	emphasis: {
    // 		scale: false,
    // 	},
    // 	symbol: "rect",
    // 	symbolSize: [5,16],// 进度条白点
    // 	itemStyle: {
    // 		barBorderRadius: [30, 0, 0, 30],
    // 		color: '#FFF',
    // 		shadowColor: "rgba(255, 255, 255, 0.5)",
    // 		shadowBlur: 5,
    // 		borderWidth: 1,
    // 		opacity: 1,
    // 	},
    // 	z: 2,
    // 	data: result,
    // 	animationDelay: 500,
    // },
  ]
});

const radomData = () => {
  // options.value.yAxis[0].data = getRandomArrayElements(rodomTitles, 7);
  options.value.yAxis[0].data = getRandomArrayElements(result, 7).map(
    item => item.name
  );
  options.value.yAxis[1].data = getRandomArrayElements(result, 7).map(
    item => item.value
  );
  options.value.series[0].data = getRandomArrayElements(result, 7).map(
    item => item.value
  );
};

radomData();

setInterval(() => {
  radomData();
}, 3000);

</script>

<template>
  <div class="rightBox1 baseBorderBg">
    <div class="baseBoxHeader">红蓝牌摘牌率</div>
    <div class="baseBoxBody">
      <myChart :option="options"></myChart>
    </div>
  </div>
</template>